<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百题斩</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <style>
        body {
            font-family: 'Inter', sans-serif;
            background: linear-gradient(135deg, #f4f4f9, #e1e5f2);
        }

        .progress-container {
            background-color: #dfe2e9;
            border-radius: 0.5rem;
            padding: 0.5rem 1rem;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            position: relative;
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .progress-text {
            z-index: 1;
        }

        .progress-bar {
            height: 10px;
            background-color: rgba(40, 167, 69, 0.3);
            border-radius: 0.5rem;
            transition: width 0.3s ease;
        }

        .question-container {
            background-color: white;
            border-radius: 0.75rem;
            padding: 1.5rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            transition: transform 0.3s ease;
        }

        .question-container:hover {
            transform: scale(1.02);
        }

        .button {
            padding: 0.75rem 1.5rem;
            border-radius: 0.5rem;
            font-weight: 600;
            transition: all 0.3s ease;
        }

        .button:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }

        .result-container {
            background-color: white;
            border-radius: 0.75rem;
            padding: 1.5rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            display: none;
        }

        /* 模态框样式 */
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.4);
        }

        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 30%;
            border-radius: 0.75rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            text-align: center;
        }

        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }

        .modal-button {
            margin-top: 10px;
            padding: 8px 16px;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .modal-button:hover {
            background-color: #0056b3;
        }
    </style>
</head>

<body class="flex flex-col items-center justify-center min-h-screen px-4">
    <div id="progress" class="progress-container mb-6">
        <span class="progress-text">当前进度: <span id="mastered-count">0</span>/<span id="total-count">0</span> 已掌握</span>
        <div class="progress-bar" id="progress-bar"></div>
    </div>
    <div id="question" class="question-container w-full max-w-3xl mb-8">
        <!-- 题目内容 -->
    </div>
    <div id="button-container" class="flex space-x-4 mb-8">
        <button id="yes-button" class="button bg-green-500 text-white">
            <i class="fa-solid fa-check mr-2"></i> 掌握
        </button>
        <button id="no-button" class="button bg-red-500 text-white">
            <i class="fa-solid fa-xmark mr-2"></i> 未掌握
        </button>
    </div>
    <div id="result" class="result-container w-full max-w-3xl">
        <!-- 结果内容 -->
    </div>
    <!-- 掌握模态框 -->
    <div id="mastered-modal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <p>✓ 已标记为掌握</p>
            <button class="modal-button" id="mastered-confirm">确认</button>
        </div>
    </div>
    <!-- 未掌握模态框 -->
    <div id="unmastered-modal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <p id="unmastered-message"></p>
            <button class="modal-button" id="unmastered-confirm">确认</button>
        </div>
    </div>
    <script src="questions.js"></script>
    <script src="script.js"></script>
</body>

</html>